<!--  -->
<template>
  <div class="reverse-layout">
    <router-view></router-view>
    <audio ref="audio" id="reverse-audio"></audio>
    <translateModal></translateModal>
    <Explain v-show="grammarExplainVisible"></Explain>
    <Skill v-show="grammarSkillModal.visible"></Skill>
    <BlankAnswer v-show="grammarBlankAnswer.visible"></BlankAnswer>
  </div>
</template>

<script>
import { mapState } from "vuex";
import BlankAnswer from './components/blankAnswer.vue'
import translateModal from "@/components/common/translateModal";
import Explain from "./skill/index";
import Skill from './skill/skill'
export default {
  components: {
    translateModal,
    Explain,
    Skill,
    BlankAnswer
  },
  data() {
    return {};
  },
  computed: {
    ...mapState({
      src: (state) => state.reverseAudioSrc,
      grammarExplainVisible: state => state.grammarExplainVisible,
      grammarSkillModal: state => state.grammarSkillModal,
      grammarBlankAnswer: state => state.grammarBlankAnswer
    }),
  },
  watch: {},
  methods: {},
  created() {},
  mounted() {},
};
</script>
<style lang="less">
/* @import url(); 引入公共css类 */
.reverse-layout {
  height: 100%;
  background-image: url("~assets/home/bg2.png");
  background-size: cover; /* no */
  background-repeat: no-repeat;
  background-position: center center;
  .chose-course-top {
    position: relative;
    .header-left {
      position: absolute;
      left: 40px;
    }
    .btn-group {
      position: absolute;
      right: 40px;
    }
  }
}
</style>
